<template>
  <div class="box">
      <p class="title">商品详情</p>
      <div class="div">
          <el-form ref="list" :model="list" label-width="80px" size="mini">
              <el-form-item label="商品名称">
                  <el-input style="width:50%" v-model="list.name"></el-input>
              </el-form-item>
              
              <el-form-item label="商品描述">
                  <el-input style="width:50%" v-model="list.subtitle"></el-input>
              </el-form-item>
              
              <el-form-item label="当前状态">
                  <el-input style="width:50%" v-model="list.status"></el-input>
              </el-form-item>

              <el-form-item label="所属分类">
                <el-input style="width:50%" v-model="list.status"></el-input>
              </el-form-item>

              <el-form-item label="商品价格">
                  <el-input style="width:30%" v-model="list.price">
                      <template slot="append">元</template>
                  </el-input>
              </el-form-item>

              <el-form-item label="商品库存">
                  <el-input style="width:30%" v-model="list.stock">
                      <template slot="append">件</template>
                  </el-input>
              </el-form-item>

              <el-form-item label="商品图片" >
                    <img width="30%" :src="list.imageHost+list.mainImage" alt="">
              </el-form-item>

              <el-form-item label="商品详情" >
                  {{list.detail}}
              </el-form-item>


          </el-form>
      </div>
  </div>
</template>
<script>
import { check } from "@/request/http";
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
export default {
    name: "ViewProduct",
    data() {
        return {
            list:{},
        };
    },
    computed: {
        ...mapState("a",["id"]),
    },
    methods: {
        check(){
            check(this.id).then(res => {
                this.list= res.data.data;
                console.log(this.list);
            });
        },
        onSubmit() {
            console.log('submit!');
        }
    },
    mounted() {
        this.check();
    },
};
</script>
<style lang="scss" scoped>
@import "@/Scss/index.scss";
* {
 margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
  height: 92vh;
  overflow: scroll;
  background: #F3F3F3;
}
.div{
    @include Pd(2rem 2rem 5rem 8.5rem);
}
.title {
    @include FlexSpace();
    @include FontOnly(2rem);
    @include Pd(1rem 2rem 0 2rem);
}
</style>